<template>

   <div>
        
        <el-form :model="form">
          <el-form-item label="手机号">
                  <el-input v-model="form.phone" placeholder="请输入手机号" style="width:300px;"></el-input>
                  
          </el-form-item>
          <el-form-item label="验证码">
              <template>
                  <el-input v-model="form.code" placeholder="请输入验证码" style="width:180px;"></el-input>
                  <el-button type="danger" @click="get_code" :loading="loading">获取验证码</el-button>
              </template>
          </el-form-item>
          <el-form-item label="">
              <el-button type="primary" @click="bind">绑定</el-button>
          </el-form-item>

        </el-form>
   </div>

</template>

<script>
export default {
   data(){
       return {
          form:{},
          loading:false,
       }
   },
   methods:{
       get_code(){
           this.loading=true
           // 获取验证码
           this.axios({
               url:"/code/",
               method:"GET",
               params:{
                   phone:this.form.phone
               }
           }).then(resp=>{
               console.log(resp.data)
               alert(resp.data.msg)
               this.loading=false
           }).catch(error=>{
               console.log(error)
               this.loading=false
           })
       },
       bind(){
           this.axios({
               url:"/user/",
               method:"PUT",
               data:{
                   phone:this.form.phone,
                   code:this.form.code,
                   uid:this.$route.query.uid
               }
           }).then(resp=>{
               console.log(resp.data)
               alert(resp.data.msg)

           }).catch(error=>{
               console.log(error)
           })
       }
   },
   created(){

   }
}
</script>

<style>
.el-form{
    width:500px;
    margin: 30px auto;
}
</style>